Gantt Chart

A Gantt chart is a type of bar chart that illustrates a schedule.

Properties

Data

Data Type

There are 2 main formats of gantt chart time data.

• Duration - how long does the event take (relative to 'start')
• End - when the event ends (similar to start)

Data Source

The Gantt chart takes in the following columns.

• ID - ID of the event
• Start - timestamp when the event starts
• Duration - If data type is 'Duration' it is relative time from event start to an end. If data type is 'End' it is a timestamp when the event ends
• Height - identifies custom height of the event
• Color - identifies custom color of the event
• Line Style - identifies outline styling of the event
• Fill - identifies type of fill of the event
• Series - identifies series the event belongs to
• Group - identifies group the event belongs to
• Label - identifies default label of the event
• Locked - identifies whether the event is locked drag&drop wise
• Draggable To - series and/or groups the event can be dragged to
• Depends On - id of event that element depends on
• Uncertainty Start Min - minimum uncertainty relative to event start
• Uncertainty Start Mid - medium uncertainty relative to start
• Uncertainty Start Max - maximum uncertainty relative to start
• Uncertainty End Min - minimum uncertainty relative to event end
• Uncertainty End Mid - medium uncertainty relative to end
• Uncertainty End Max - maximum uncertainty relative to end

Time Factor

By default, all dates and times are expected to be in seconds, if your data set is based on milliseconds set the time factor to 1000. If your data is in minutes, set it to 0.016 (1/60 seconds), etc.

Enforce Custom Series

Allows provisioning a list of series that will be displayed. Typical use-case is custom sorting.

Custom Series

If Enforce Custom Series is set to true, provide new series set here. It takes SDD, an Array Of Objects, { group: name, series: name }. The order of elements, defines the order of groups/series. If grouping is disabled key "group" is ignored.

Note: It sorts groups by appearance first. Therefore, following SDD data: [{group: A, series: 1}, {group: B, series 2}, { group: A, series 3}] will render Group A - 1, 3, group B - 2 in that order.

Sort Series

Allows sorting series and groups Ascending or Descending.

Data Keys

Matches data structure to expected data structure. Provide name of the keys in your data set that correspond to the values.

• ID - identifies unique element
• Start - timestamp when the event starts
• Duration - If data type is 'Duration' it is relative time from event start to an end. If data type is 'End' it is a timestamp when the event ends
• Height - identifies custom height of the event in percent
• Color - identifies custom color of the event
• Line Style - identifies outline styling of the event, currently supported values: undefined, dashed. Undefined equals solid
• Fill - identifies type of fill of the event, currently supported values: undefined, transparent
• Series - identifies series the event belongs to
• Group - identifies group the event belongs to
• Label - identifies default label of the event
• Label Color - identifies color of the label for element
• Locked - identifies whether the event is locked drag&drop wise
• Prevent Resize - identifies elements that should never allow resizing
• Draggable To - series and/or groups the event can be dragged to
• Drag Lock X - if set to true allows dragging only between series, locking time axis drag for the element
• Depends On - id of event that element depends on
• Milestone - whether the element is milestone (spot in time, diamond) or regular event (a bar)
• Uncertainty Start Min - minimum uncertainty relative to event start
• Uncertainty Start Mid - medium uncertainty relative to start
• Uncertainty Start Max - maximum uncertainty relative to start
• Uncertainty End Min - minimum uncertainty relative to event end
• Uncertainty End Mid - medium uncertainty relative to end
• Uncertainty End Max - maximum uncertainty relative to end
• Point Type - identifies type of an event if element is a milestone (diamond, circle, square, triangle, triangle-down)
• Stroke Color - identifies color of event border
• Stroke Width - identifies width of the event border
• Opacity - identifies event opacity
• Vertical Alignment - for elements smaller than 100% height - identifies alignment (bottom, top, middle)
• Top Data Label After - identifies text rendered after the event at the top edge of it
• Bottom Data Label After - identifies text rendered after the event at the bottom edge of it
• Top Data Label After Color - identifies the color of the Top Data Label After
• Bottom Data Label After Color - identifies the color of the Bottom Data Label After
• Drag Group - identifies a group of elements with equal Drag Group so they can be dragged as one

An example of events with dependency, custom height and uncertainty.

Display Options

Point Spacing

Distance between event top/bottom and top/bottom edge of the row. Distance is represented by pixels divided by 2. Default is 4.

Dense Points

When set to true milestone elements are rendered smaller.

Chart Height

Custom fixed chart height it will resize to. It's ignored if set to 0.

Element Height

Custom height of rows.

Color by element

If set to true chart will pick color property of each event individually instead of using series colors.

Enable Odd Rows Color

If set to true every odd row will have custom background color for improved visibility.

Odd Rows Color

Custom background color for Enable Odd Rows Color

Show Tick Lines

Should show tick lines

Display Uncertainty

If set to true and data set contains uncertainty values, uncertainty triangles will be rendered.

Disable Special Cursors

When set to true disables the cursor showing as a hand when an element is draggable.

Helper Box Time Format

Time format in helper box (box shown in top right corner when actions are performed).

Current Time

Enable

Show current time indicator for better perspective of what happened and what's going to happen event wise.

Line Color

Color of the current line indicator

Line Style

Line style of the current line indicator

Available options are:

• Dashed
• Solid

Line Width

Width of the current line indicator

Add/Delete Elements

Allow Add Elements

If set to true, users will be able to add new elements to the chart through it's interface.

Add Preset

This property defines shape of added element, only start and series are changed to pointer position. It's an array of elements, where label is rendered on dropdown list of preset.

Sample preset data: [{ label: 'one', duration: 10000}, { label: 'two', duration: 2000 }]

Allow Delete Elements

If set to true, users will be able to delete selected elements.

Time Axis

Horizontal axis

Enabled

If set to true, chart will render time axis.

Minimum

Set custom minimum value in seconds to be displayed on time axis.

Maximum

Set custom maximum value in seconds to be displayed on time axis.

Font Size

Choose labels font size on time axis.

Show Relative Time

Time labels will be calculated as time passed since the first event start and displayed as days and hours since. I.e. 2d4h, or 2h, etc.

Day Label Format

Formats day label on X axis ticks. Full list of tokens can be found here date-fns documentation

Month Label Format

Formats hour label on X axis ticks. Full list of tokens can be found here date-fns documentation

Hour Label Format

Formats hour label on X axis ticks, to change format to AM/PM use 'hh:mma' Full list of tokens can be found here date-fns documentation

Show Tick Lines

If set to true chart will render full height line going from the time tick label, down to the bottom of the chart for improved readability.

Enable Horizontal Scroll

If set to true, data will zoom to make sure the smallest element has at least 10px width. Zoom level can be altered by scrolling while holding ctrl. To just scroll the data please hold shift or use device that provides x-axis scroll (i.e. touchpad)

Scroll Thickness

Number value controlling the thickness of the scrollbar

Initial scroll scale

This is a miliseconds value representing distance between first and last visible date. It's used to control zoom level on X axis. This property is triggered on initial chart load only and in case 'X Scroll Position' is being used it will take lefthand value and create the righthand one as a sum of lefthand and Initial scroll scale. It won't overwrite the scale during the interaction with the chart.

Hide Horizontal Scrollbar

If set to true, the scrolling behavior will remain, allowing scroll with mouse/touchpad but the scrollbar will remain hidden.

Show Week Numbers

If set to true, shows week of the year instead of month.

Show Hours

If set to true, shows hours on the axis. It automatically calculates how many hour ticks it can show. There's a point where there's no hour being shown at all due to lack of space.

Show Days

If set to true, shows days of the month on the axis. (1, 2, 3...)

Show Days of the week

If set to true and Show Days is set to true, shows days of the week instead. (Mon, Tue, ...).

Zoom By Drag

If set to true, clicking on empty space in chart and dragging that click horizontally will mar the range that will be zoomed into once the event is finished.

Zoom By Drag Color

Defines the color of the Zoom By Drag range highlight.

Use Extra Ticks

When set to true allows adding custom lines, similar to current time indicator. Useful to indicate important time changes (i.e. deadlines, shifts, etc.)

Additional ticks

Takes an array of { color: Color, lineStyle: solid | dashed, lineWidth: number, tick: number }. Renders the extra ticks at provided positions, where tick is the time in milliseconds (or different format based on Time Factor property)

Series Axis

Vertical Axis

Enable Vertical Scroll

If set to true it will resize the chart to either fit within provided fixed height or available container. Calculating based on element height or default value how many elements will fit into the view. To navigate between series use scroll.

Scroll Thickness

Number value controlling the thickness of the scrollbar

Hide Vertical Scrollbar

If set to true, the scrolling behavior will remain, allowing scroll with mouse/touchpad but the scrollbar will remain hidden.

Enable Grouping

If set to true chart will use group key to group the series. Groups are collapsible.

Group Header Background

Color of the background under all group headers.

Group Header Color

Font color of all group headers.

Data Labels

Enabled

If set to true, render data labels.

Overlap Enabled

If set to true, labels ignore their space limits and render all the time.

Show Default Value

Show default value provided as "label"

Font Size

Choose labels font size.

Show Ellipsis

If set to true and data label is cut due to available space, it will replace last 3 characters with ellipsis (...).

Minimum Characters

Defaults to 0. Defines minimum number of characters being show regardless of available space.

Tooltips

Enabled

Enable or disable tooltips for all data points.

Config

Format for a simple tooltip. Specify a suffix or prefix and set the decimal places.

{
  "prefix": "",
  "suffix": "",
  "multiplier": "auto",
  "decimalPlaces": 1,
  "capitalize": true,
  "useLocale": true
}

Column Config

Construct a custom tooltip by combining data from columns in the source data.

• Column - Column from the data source to display in the tooltip.
• Label - Alias to display instead of the column name.
• Apply To All Series - Should this column tooltip be displayed for all series?
• Applies To Series - Which series should this tooltip schema apply to.
• Prefix - Tooltip prefix.
• Suffix - Tooltip suffix.
• Data Type - String, Number, Date, Date Time
• Multiplier - Converts the value to the chosen multiplier. For example, the option "Thousands" would convert the value "1000" to "1k".
• Decimal Points - Decimal points to add to the number.
• Capitalized Multiplier - Capitalizes the multiplier value.
• Locale Used - Should the tooltip be formatted based on user locale?

Position

Defines data label position. Can be - left, right, center. The default is left.

Tooltips

Enabled

Enable or disable tooltips for all data points

Config

Format for a simple tooltip. Specify a suffix or prefix and set the decimal places.

{
  "prefix": "",
  "suffix": "",
  "multiplier": "auto",
  "decimalPlaces": 1,
  "capitalize": true,
  "useLocale": true
}

Column Config

Construct a custom tooltip by combining data from columns in the source data.

Column

Column from the data source to display in the tooltip.

Label

Alias to display instead of the column name.

Apply to all series

Should this column tooltip be displayed for all series?

Applies To Series

Which series should this tooltip schema apply to.

Prefix

Tooltip prefix.

Suffix

Tooltip suffix.

Is Numeric

Is the tooltip numeric? If yes, hide the properties related to numeric tooltips.

Multiplier

Converts the value to the chosen multiplier. For example, the option "Thousands" would convert the value "1000" to "1k".

Decimal Points

Decimal points to add to the number.

Capitalized multiplier

Capitalizes the multiplier value.

Font Size

Defines font size of the tooltip

Selection

Hovered Element ID

Returns the ID of the last hovered element. This may affect performance.

Put In View

Allows to scroll to chosen element by it's id and highlight it. Useful for search features. It scrolls only once and after the scroll is done allows scrolling the element outside of view.

Enable

When set to true enables use of the mechanism.

Element Id

Id of the element in dataset that should be scrolled to and highlighted.

Color

Color applied to highlighted element to improve it's visibility and make it stand out from selection.

Drag And Drop

Enable Drag and Drop

If set to true elements can be dragged and dropped or resized freely. To prevent some of them see Enable Locking

Element Drag Group

Enables use of the element property dragGroup which makes elements drag together as one.

Drag Edge Size

When dragging the element near the edge of the chart it will scroll. This property defines the sizes of the edge where the event is triggered.

Chart opacity while dragging

Percentage value representing opacity of the chart during drag and drop action. 0 means completely translucent and 100 is completely opaque.

Drag selected elements

If set to true selected elements will be dragged regardless of which element user drags with. Otherwise only hovered element is dragged.

Step Size

Step size on the time axis. Determines multiplication by which element can be moved on the time axis. I.e. if set to one hour (3600) element starting at 10:00 can be moved only by hours, i.e. to 11:00 or 15:00 etc. Default is 1.

Enable Element Locking

If set to true, chart will use locked property of elements to determine if element can be changed (dragged, resized) or not. Each event big enough (visual wise) will contain padlock icon, where opened means able to drag (locked - false) and closed means prevent change (locked - true). Clicking on the padlock changes the event state to the opposite value.

Display LockState on Hover

If set to true it will hide lock icons and display them only when hovering a mouse over an element

Display LockState for Locked elements

If set to true it will render padlocks only for elements with locked value - true. To see opened padlock - hover over the element.

Enable Drag Boundaries

If set to true chart will use draggableTo key to determine whether to allow dragging to target series/group or not.